[Day12] webGL 框架 - Three.js 簡介

three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼承的方式來做應用，也不用再花那麼久的時間跟 GLSL 打交道了。

Three.js 概覽

three.js

首先，我們來看看 three.js 中基本的繪製流程：

1. 建立場景 (通常透過 new THREE.Scene())
2. 建立物件（mesh)
   1. 建立幾何形狀
   2. 建立材質
3. 加入攝影機
4. 加入燈光
5. 呼叫 renderer.render 繪製場景。

以上就是 Three.js 的工作流程。

其實到了這個章節能夠介紹的東西並不多了，因為 three.js 本身的文件和生態系算是相當完整，所以很容易就可以找到教學或解答。這邊只是介紹各種 API 的使用，剩下就靠各位的創意了

1. 建立場景

我們可以使用 new THREE.Scene() 的方式來建立一個場景。裡頭可以設定一些參數，但大部分的狀況下我們只要直接將物件 new 出來就可以了

2. 建立簡單的幾何形狀

在 three 當中，有許多已經定義好的幾何形狀，不必再自己手寫頂點位置了。不過這些只是基本的幾何形狀，如果需要更複雜的形狀就需要另外建模了。（註：Three.js 有 Loader API，可以匯入業界常用的 obj 檔當作建模頂點）

3. 套用材質

材質上 Threejs 中也準備了蠻多材質的，這邊我們使用馮氏反射面材質。

const geometry = new THREE.SphereGeometry( 5, 30, 30 );
const matertial = new THREE.MeshPhongMaterial({
	color: new THREE.Color('rgb(0,0,212)'),
});

const mesh = new THREE.Mesh(geometry, matertial);
mesh.position.set(0, 0, 0);

4. 光源設定

注意到，顏色必須使用 16 進制的方式表達，例如 0xffff，也可以使用 THREE.Color 的方式，傳入比較易懂的顏色代碼進去。

var light = new THREE.DirectionalLight( new THREE.Color('rgb(255,255,255)') ); 

5. 攝影機

在 Three 裡頭除了前幾天提到的正交投影與透視投影外，還有 StereoCamera（Perspective Camera ） 以及 CubeCamera （360 度的攝影機）

new PerspectiveCamera(fov,aspect, near,far)

• fov (FieldOfViewY) 直接用角度表示。不用轉換弧度
• aspect 長寬比
• near 近剪裁面
• far 遠剪裁面

6. renderer 繪製場景

const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

將 scene , camera 傳入 renderer，就將場景繪製出來囉！

可以到 demo-Threejs 玩玩看，自己調整一下參數看看會發生什麼事情吧！

為了讓各位了解 Three 的運作方式，這邊只稍微展示一下 threejs 的繪圖流程。之後我會針對每個重要的 API 部分做講解，也會試著套用在一些比較實際的場景應用當中。

所以不必擔心現在看不太懂代碼，之後我們會陸續講解的。

three 是個非常強大的框架，幾乎已經涵蓋了 webGL 應用的範圍，在 官網 當中，甚至還能看到令人驚艷的特效。等不及的朋友們可以趕快到官方網站挖掘 API 跟教學吧！

附帶一提，官方網站左下角那本 webGL 算是很詳盡的教學書，只是薄薄 200 多頁要價不菲，想要深入 webGL 的讀者們可以參考，我不確定這本有沒有中譯本，只是博客來已經賣完了，想要看看實體書的朋友們可能要到天瓏書局瞧瞧了。